<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="!pageLoading">
			<view class="first-section">
				<view class="left">
					<text :class="info.icon"></text>
				</view>
				<view class="right">
					<view style="color:#333;font-size: 16px;font-weight: bold;">{{info.name}}详情</view>
					<view class="mt-20" style="font-size:12px;color:#666;">{{info.description}}</view>
				</view>
			</view>
			<view v-if="info.stats" class="section py-20">
				<view class="grid row-2">
					<view v-for="item in info.stats">
						<view style="font-size: 14px;color:#999;"> {{item.label}}</view>
						<view class="mt-10" style="color:#333;font-size: 16px;font-weight: bold;">{{item.value}}</view>
					</view>
				</view>
			</view>
			<view v-if="info.responsibilities" class="section py-20">
				<view class="section-title">核心职责</view>
				<view class="px-30">
					<view style="font-size: 14px;display: flex;align-items: center;margin:15rpx 0;"
						v-for="item in info.responsibilities">
						<text class="li-icon ri-check-fill mr-20"></text>{{item}}
					</view>
				</view>
			</view>
			<view v-if="info.gridComparison" class="section py-20">
				<view class="section-title">社区与村级网格对比</view>
				<view class="px-30">
					<view class="p-30" style="border-radius: 15px;background-color: #EEF2FF;">
						<view class="mb-30" style="font-size: 16px;font-weight: bold;color:#333">社区网络</view>
						<view style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">网格数量</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">
								{{info.gridComparison.community.count}}个</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">平均人口</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">
								{{info.gridComparison.community.avgPopulation}}人/网格</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">月均事件</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">
								{{info.gridComparison.community.avgEvents}}件/网格</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">满意度</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">
								{{info.gridComparison.community.satisfaction}}%</view>
						</view>
					</view>

					<view class="p-30 mt-30" style="border-radius: 15px;background-color: #F0FDF4;">
						<view class="mb-30" style="font-size: 16px;font-weight: bold;color:#333">村级网络</view>
						<view style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">网格数量</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">
								{{info.gridComparison.village.count}}个</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">平均人口</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">
								{{info.gridComparison.village.avgPopulation}}人/网格</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">月均事件</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">
								{{info.gridComparison.village.avgEvents}}件/网格</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">满意度</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">
								{{info.gridComparison.village.satisfaction}}%</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="info.unitTypesPerformance" class="section py-20">
				<view class="section-title">各类基层单元绩效</view>
				<view class="px-30">
					<view class="p-30"
						style="display: flex;align-items: center;margin:15rpx 0;background-color: #EEF2FF;border-radius: 15px;"
						v-for="item in info.unitTypesPerformance">
						<view style="flex-grow: 1;">
							<view style="font-size: 14px;font-weight: bold;">{{item.type}}</view>
						
						</view>
						<view style="flex-shrink: 0;">
							<view style="font-size: 12px;color:#999;">响应时间</view>
							<view class="mt-10" style="font-size: 14px;font-weight: bold;">{{item.responseTime}}</view>
						</view>
						<view style="flex-shrink: 0;margin-left: 20px;">
							<view style="font-size: 12px;color:#999;">满意度</view>
							<view class="mt-10" style="font-size: 14px;font-weight: bold;">{{item.satisfaction}}%</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height:30rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		getGovernanceDetail
	} from '@/config/api.js';
	export default {
		data() {
			return {
				pageLoading: false,
				info: {
					"level": "五级长",
					"type": "floorHouseholdStore",
					"id": null,
					"name": "楼层/中心户/门店级",
					"managers": "楼层长/中心户/店长",
					"color": "green",
					"icon": "home-4-line",
					"gradient": "from-green-500 to-teal-500",
					"shortDescription": "前沿收集",
					"description": "楼层/中心户/门店级是治理体系的最基层单元，直接服务于住户、中心户或商铺，是信息收集的前沿。",
					"stats": [{
							"label": "单元总数",
							"value": "3,284个"
						},
						{
							"label": "主要负责人",
							"value": "楼层长/中心户/店长"
						},
						{
							"label": "社区单元",
							"value": "864个楼层/346家店铺"
						},
						{
							"label": "农村单元",
							"value": "2,074个中心户"
						}
					],
					"responsibilities": [
						"末端信息传递和前沿收集",
						"协助解决小范围问题",
						"提供邻里互助服务",
						"参与社区/村庄公共事务"
					],
					"events": null,
					"units": null,
					"gridComparison": null,
					"topGrids": null,
					"unitTypes": null,
					"unitTypesPerformance": [{
							"type": "社区楼层",
							"responseTime": "0.5小时",
							"satisfaction": 96.2
						},
						{
							"type": "社区商铺",
							"responseTime": "0.3小时",
							"satisfaction": 94.5
						},
						{
							"type": "农村中心户",
							"responseTime": "0.6小时",
							"satisfaction": 97.4
						}
					],
					"performanceScore": 96,
					"responseTime": 0.5,
					"responseTimeChange": -0.2
				},
				options: {},
			}
		},
		onLoad(options) {
			this.options = options;
			this.getPageData(() => {
				this.pageLoading = false;
			});
		},
		onPullDownRefresh() {
			this.getPageData(function() {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			getPageData(cb) {
				getGovernanceDetail(this.options.level).then(res => {
					this.info = res.layout;
					this.pageLoading = false;
					typeof cb == 'function' && cb();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.tag {
		display: block;
		padding: 2px 8px;
		background-color: #DCFCE7;
		border-radius: 50em;
		color: #5FC483;
		font-size: 10px;
	}

	.table {
		display: table;
		width: 100%;
		border: 1rpx solid #eee;

		.row {
			display: table-row;

			border-bottom: 1rpx solid #eee;
			color: #333;
			font-size: 12px;
		}

		.cell {
			display: table-cell;
			padding: 8px;
			text-align: center;

		}

		.header {
			background: #f8f8f8;
			font-weight: bold;
			color: #999;
			font-size: 12px;
		}
	}

	.li-icon {
		width: 20px;
		height: 20px;
		color: #E14D8F;
		background-color: #FCE7F3;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.first-section {
		display: flex;
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		padding: 40rpx 30rpx;
		background-color: white;
		border-radius: 10px;
		background-color: #DFFCE9;
		color: white;
		border: 1rpx solid #C1F0CE;

		.left {
			width: 50px;
			height: 50px;
			color: #2DAD5C;
			background-color: #DAFBE5;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.right {
			padding-left: 30rpx;
		}
	}

	.section {
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		background-color: white;
		border-radius: 10px;

		.section-title {
			font-size: 17px;
			font-weight: bold;
			padding: 20px;
		}

		.badge {
			display: inline-block;
			font-size: 12px;
			background-color: lightcoral;
			color: white;
			padding: 2px 8px;
			border-radius: 5px;
		}
	}

	.tabs {
		display: flex;
		flex-wrap: wrap;

		.tabs-item {
			flex: 1;
			text-align: center;
			font-size: 17px;
			font-weight: bold;
			padding: 10px 20px;
			border-bottom: 2px solid #eee;

			&.on {
				border-color: lightcoral;
			}
		}
	}

	.grid {
		display: flex;
		flex-wrap: wrap;

		&>view {
			width: calc(50% - 20px);
			margin: 10px;
			text-align: center;
		}

		&.row-2 {
			&>view {
				width: calc(50% - 20px);
			}
		}
	}

	.sub-title {
		display: flex;
		align-items: center;
		padding: 15px;

		.icon {
			width: 40px;
			height: 40px;
			border-radius: 40px;
			background-color: #eee;
			text-align: center;
			line-height: 40px;
		}

		.center {
			padding-left: 10px;
			flex-grow: 1;
		}

		.right {
			font-size: 12px;
			display: inline-block;
			padding: 2px 8px;
			border-radius: 5px;
			background-color: lightcyan;
			color: royalblue;
			border: 1rpx solid #eee;

		}
	}

	.village-list {
		margin: -5px;
	}

	.village-item {
		color: #666;
		margin: 5px;
		font-size: 12px;
		display: inline-block;
		padding: 2px 8px;
		border-radius: 5px;
		background-color: white;
		border: 1rpx solid #eee
	}

	.levels-item {
		padding: 10px 20px;
		display: flex;
		align-items: center;

		.left {
			flex-shrink: 0;
			background-color: lightsalmon;
			color: white;
			text-align: center;
			line-height: 40px;
			width: 40px;
			height: 40px;
		}

		.right {
			padding-left: 15px;
			flex-grow: 1;
		}
	}


	.tags {
		margin-left: -5px;
		margin-right: -5px;

		&>view {
			display: inline-block;
			padding: 4px 10px;
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 50em;
			color: white;
			font-size: 12px;
			margin: 5px;

			&>text {
				margin-right: 5px;
			}
		}

	}
</style>